<template>
  <div class="userInfo">
    <van-nav-bar
      title="个人信息"
      left-text=""
      left-arrow
      @click-left="$router.go(-1)"
      :safe-area-inset-top="true"
    />
    <div class="avater">
      <van-image
        round
        width="100%"
        height="100%"
        :src="avatar"
        @click="vanImagePreview(avatar)"
        @touchstart="gtouchstart(avatar)"
        @touchmove="gtouchmove(avatar)"
        @touchend="gtouchend(avatar)"
      />
    </div>
    <div class="x_y_center mt-5 mb-5 c999">
      长按头像修改
    </div>
    <div class="x_y_center mt-5 myName">
      No.{{ userNo.replace(/\D/g, "").replace(/....(?!$)/g, "$& ") }}
      <van-tag plain type="primary" class="ml-5" @click="copyText(userNo)"
        >复制</van-tag
      >
    </div>
    <info-card></info-card>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { ImagePreview, Toast, Dialog } from "vant";
import infoCard from "./components/infoCard.vue";
export default {
  components: {
    // editPhoeDialog,
    infoCard,
  },
  setup() {
    const state = reactive({
      avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
      userNo: "0731 1769 110",
    });

    const copyText = (val) => {
      let copy = (e) => {
        e.preventDefault();
        e.clipboardData.setData("text/plain", val); // 调用window自带的剪贴板
      };
      document.addEventListener("copy", copy);
      document.execCommand("Copy");
      Toast("复制成功\n编号: " + val);
    };
    const vanImagePreview = (img) => {
      ImagePreview({
        images: [img],
        overlayStyle: {
          zIndex: 9999,
        },
      });
    };
    var timeOutEvent = 0; //定时器
    //开始按
    const gtouchstart = (item) => {
      timeOutEvent = setTimeout(function() {
        longPress(item);
      }, 500); // 定义长按500毫秒触发长按事件
      return false;
    };
    // 手释放 <500毫秒（取消长按事件），执行点击事件
    const gtouchend = (item) => {
      clearTimeout(timeOutEvent);
      if (timeOutEvent != 0) vanImagePreview(item);
      return false;
    };
    // 手指有移动的情况
    const gtouchmove = () => {
      clearTimeout(timeOutEvent);
      timeOutEvent = 0;
    };

    // 长按不放执行
    const longPress = (item) => {
      timeOutEvent = 0;
      // 执行长按要执行的内容
      editAvatar(item);
    };
    const editAvatar = (item) => {
      Dialog.confirm({
        title: '修改头像',
        message: "你确定修改头像吗?",
      })
        .then(() => {
          Toast("确定"+item);
        })
        .catch(() => {
          // on cancel
          Toast("取消");
        });
    };
    return {
      vanImagePreview,
      ...toRefs(state),
      copyText,
      gtouchstart,
      gtouchend,
      gtouchmove,
      longPress,
    };
  },
};
</script>

<style lang="less" scoped>
.userInfo {
  background: #f8f8f8;
  .avater {
    height: 80px;
    width: 80px;
    margin: 10px auto;
  }
  .myName {
    font-size: 16px;
  }
}
</style>
